<template>
  <a-modal
    v-model:visible="cVisible"
    :body-style="{ padding: '5px 10px 0 16px' }"
    v-bind="$attrs"
    :after-close="remove"
    :closable="false"
    :width="width"
    :footer="footer"
    destroy-on-close
  >
    <modal-header :title="title">
      <template #right>
        <close-outlined
          style="font-size: 16px; color: gray"
          @click="cVisible = false"
        ></close-outlined>
      </template>
    </modal-header>

    <slot></slot>

    <template #footer>
      <div class="footer-action">
        <template v-if="defaultFooter">
          <a-button
            style="color: white; background-color: #f50"
            :loading="loadingOk"
            @click="handleOk"
            >确定</a-button
          >
          <a-button @click="cVisible = false">取消</a-button>
        </template>
        <template v-else>
          <slot name="footer"> </slot>
        </template>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch } from 'vue'
  import { Modal, Button } from 'ant-design-vue'
  import { CloseOutlined } from '@ant-design/icons-vue'
  import ModalHeader from '@/components/ModalHeader.vue'

  export default defineComponent({
    name: 'SponsorModal',
    components: {
      ModalHeader,
      [Modal.name]: Modal,
      [Button.name]: Button,
      CloseOutlined
    },
    inheritAttrs: false,
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      defaultFooter: {
        type: Boolean,
        default: false
      },
      loadingOk: {
        type: Boolean,
        default: false
      },
      width: {
        type: [Number, String],
        default: '30%'
      },
      footer: Object as PropType<VueNode>,
      title: {
        type: String,
        default: ''
      },
      remove: {
        type: Function,
        default: () => {}
      },
      handleOk: {
        type: Function,
        default: () => {}
      }
    },
    setup(props) {
      const state = reactive({
        cVisible: props.visible,
        loadingOk: props.loadingOk
      })

      watch(
        () => props.visible,
        (newVal) => {
          state.cVisible = newVal
        }
      )

      watch(
        () => props.loadingOk,
        (newVal) => {
          state.loadingOk = newVal
        }
      )

      return {
        ...toRefs(state)
      }
    }
  })
</script>

<style lang="scss" scoped>
  .footer-action {
    text-align: center;
  }
</style>
